<script setup>
import img1 from '@/assets/imgs/home1.png';
import img2 from '@/assets/imgs/home2.png';
import Header from "@/components/Header.vue";
import {onBeforeUnmount, onMounted, ref} from "vue";

const text = ref('在这个网站,我们将共同学习');
const displayedText = ref('');
const index = ref(0);
const interval = ref(200); // 每个字符显示的时间间隔（毫秒）

const bannerList = ref([{ contentCover: img1 }, { contentCover: img2 }]);
const className = ref("lun-img"); // 轮播图名字

const images = ref([
  'src/assets/imgs/back.png',
  'src/assets/imgs/back1.png',
  // 更多图片路径...
]);

const currentIndex = ref(0);
let intervalId = null;

onBeforeUnmount(() => {
  stopImageCycle();
});

onMounted(() => {
  startImageCycle();
  typeWriter(); // 启动打字机效果
  setTimeout(() => {
    className.value = "lun-img-two";
  }, 300);
});

function startImageCycle() {
  intervalId = setInterval(() => {
    currentIndex.value = (currentIndex.value + 1) % images.value.length;
  }, 6000); // 每6秒切换一次背景
}

function stopImageCycle() {
  clearInterval(intervalId);
}

function typeWriter() {
  if (index.value < text.value.length) {
    displayedText.value += text.value.charAt(index.value);
    index.value++;
    setTimeout(typeWriter, interval.value);
  }
}

function changeImg() {
  className.value = "lun-img";
  setTimeout(() => {
    className.value = "lun-img-two";
  }, 300);
}
</script>

<template>
  <!-- 头部:start -->
  <div>
    <transition name="background-fade">
      <div
        class="background-image"
        :style="{ backgroundImage: 'url(' + images[currentIndex] + ')' }"
        key="currentIndex"
      >
        <Header />
        <!-- 头部:end -->
        <!-- 中部中马灯区域 -->
        <div class="carousel-container">
          <div class="carousel-map">
            <el-carousel :interval="4000" @change="changeImg" style="width: 100%; margin-top: 1px;" trigger="click" height="450px">
              <el-carousel-item v-for="(item, index) in bannerList" :key="index">
                <img :src="item.contentCover" alt="Banner Image" />
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="carousel-text">
            <div id="hero-content" class="d-flex flex-column align-items-center">
              <h1 style="color: #FFD700; font-size: 50px; font-weight: bold;" class="animate__animated animate__swing animate__delay-4s new-content">We Learn</h1>
              <div id="app">
                <div class="typing-demo">
                  <h2 style="color: #FFD700">{{ displayedText }}</h2>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom-images-container">
            <img class="bottom-image" src="@/assets/imgs/video.png" alt="左图" >
            <img class="bottom-image" src="@/assets/imgs/video.png" alt="中图" />
            <img class="bottom-image" src="@/assets/imgs/video.png" alt="右图" />
          <div class="right-image-wrapper">
            <router-link to="/course">
            <span class="more-course-btn">更多课程</span>
            </router-link>
          </div>
        </div>
      </div>
    </transition>
    <footer>
      <div class="page-footer">
        <span class="footer-links"> 用户协议 | 隐私政策 | <RouterLink to="/introduction">关于我们</RouterLink> | 联系我们 | 加入我们</span>
      </div>
    </footer>
  </div>

  <!-- 中部中马灯区域 -->
</template>

<style lang="scss" scoped>
.page-footer {
  padding: 30px;
  box-shadow: 0 -2px 20px rgba(255, 215, 0, 0.1); /* 增加投影提升层次感 */
  background: url("@/assets/imgs/footer.png");
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 40px; /* 增加链接间距 */
  margin-bottom: 20px;

  span {
    color: #fff;
    font-size: 16px;
    transition: color 0.3s; /* 悬停效果 */

    &:hover {
      color: #FFD700; /* 鼠标悬停变色 */
    }
  }
}

.footer-info {
  text-align: center;
  color: #999;
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 20px;
}

.footer-icons {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap; /* 图标换行 */

  img {
    max-width: 100px;
    height: auto;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.3)); /* 图标阴影 */
  }
}
.right-image-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.more-course-btn {
  position: absolute;
  top: -30px; /* 根据实际调整距离图片顶部的距离 */
  color: #FFD700; /* 文字颜色与页面主题色统一 */
  font-size: 24px;
  font-weight: bold;
  cursor: pointer; /* 显示指针暗示可点击 */
}

.bottom-images-container {
  bottom: 20px; /* 原有定位 */
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 0 20px;
  box-sizing: border-box;
  margin-top: -300px; /* 新增：通过负 margin 拉近距离，数值可根据实际效果调整 */

  .bottom-image {
    max-width: 30%;
    object-fit: contain;
  }
}
.bgImg {
  background-image: url('@/assets/imgs/back.png');
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
.carousel-container {
  margin-top: 40px;
  display: flex;
  justify-content: left;
  align-items: flex-start;
  height: 100vh;
}

.carousel-map {
  width: 45%;
}

.carousel-text {
  margin-top: 100px;
  margin-left: 200px;
  width: 30%; /* Adjust the width as needed */
  text-align: center;
  color: #333; /* Text color */
  font-size: 16px; /* Font size */

}

/* 图片样式 */
.el-carousel__item img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保证图片完整且填满容器 */
}
/* 过渡效果和变换样式保持不变 */
.lun-img,
.lun-img-two {
  transition: transform 3s;
}

.lun-img {
  transform: scale(1.5);
}

.lun-img-two {
  transform: scale(1);
}

.el-carousel-item.is-animating {
  transition: all 0.6s;
}

@keyframes jump {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0); /* 初始位置 */
  }
  40% {
    transform: translateY(-10px); /* 向上跳起的位置 */
  }
  60% {
    transform: translateY(-15px); /* 最高点 */
  }
}

/* 应用动画 */
.carousel-map img {
  animation: jump 2s infinite alternate; /* 无限循环的跳动动画 */
}

.typing-demo {
  white-space: pre-wrap; /* 保持文本中的空格和换行 */
  border-right: none; /* 移除打字机效果的边框 */
  animation: typing 0.5s steps(40, end), blink-caret 0.75s step-end infinite;
}
/* 打字机效果动画 */
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

/* 光标闪烁动画 */
@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: black; }
}
.background-image {
  width: 100%;
  background-size: cover;
  background-position: center;
  background-image: url('@/assets/imgs/back.png');
  background-repeat: no-repeat;
  height: 100%;
}

.background-fade-enter-active, .background-fade-leave-active {
  transition: opacity 1s;
}
.background-fade-enter, .background-fade-leave-to {
  opacity: 0;
}
.new-content::before,
.new-content::after {
  content: ''; /* 必须有content属性 */
  position: absolute; /* 绝对定位 */
  top: 30.5%; /* 垂直居中 */
  transform: translateY(-50%); /* 确保装饰线条垂直居中 */
  height: 2px; /* 装饰线条的高度 */
  width: 20%; /* 装饰线条的宽度，你可以根据需要调整 */
  background-color: #FFD700; /* 金色 */
}

.new-content::before {
  left: 40%; /* 将装饰线条定位到标题的左侧 */
}

.new-content::after {
  right: 0; /* 将装饰线条定位到标题的右侧 */
}
</style>
